/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable no-unused-vars */
/* eslint-disable no-return-assign */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable no-param-reassign */
/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  DownloadOutlined,
  DownOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Modal,
  message,
  Badge,
  Tabs,
  Tooltip,
  DatePicker,
  Select,
  Radio,
} from 'antd';
import router from 'umi/router';
import Link from 'umi/link';
import moment from 'moment';
import queryString from 'query-string';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import Authorized from '@/utils/Authorized';
import styles from '@/utils/utils.less';
import downloadFile, { getProPagination } from '@/utils/utils';
import Customer from '../../components/SendOrderCustomer';
import Area from '../../components/Area';
import TextOverFlow from '../../components/TextOverFlow';
import proIcon from '../../../assets/proIcon.png';

const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;

@connect(({ publicdata, reduceempsend, loading, addemprec }) => ({
  pageData: reduceempsend.data,
  dictCode: publicdata.dictCode,
  supplyList: addemprec.supplyList,
  data: reduceempsend.data,
  proListData: reduceempsend.proListData, // 问题人员
  loading: loading.models.reduceempsend,
  tabList: reduceempsend.tabList,
  expandForm: reduceempsend.expandForm,
  activeKey: reduceempsend.activeKey,
  formFieldsValue: reduceempsend.formFieldsValue,
  downloadParams: reduceempsend.downloadParams,
}))
@Form.create()
class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tabList: [
        // { itemName: '待发单', itemCode: '1' },
        { itemName: '已发单', itemCode: '2' },
        { itemName: '已接单', itemCode: '3' },
        { itemName: '已回单', itemCode: '4' },
        { itemName: '问题人员', itemCode: '5' },
        { itemName: '已取消', itemCode: '6' },
      ],
      formValues: {},
      selectedRows: [],
      selectedRowKeys: [],
      activeKey: '2',
      editFlag: null,
      proTable: {},
    };

    this.tableSearchLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount() {
    const {
      location,
      activeKey,
      pageData: { pagination },
    } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    this.props.dispatch({
      type: 'addemprec/fetchSupplyList',
      payload: { name: null, ...this.props.params },
    });
    const proPagination = getProPagination(tempActiveKey, '5', pagination);
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    } else {
      this.getList(tempActiveKey, proPagination.current, proPagination.pageSize);
    }
    // this.getList(tempActiveKey, pagination.current, pagination.pageSize);
  }

  // 获取列表
  getList = (activeKey = '2', currentPage = 1, pageSize = 10, queryParam, isClear = true) => {
    if (isClear) {
      this.setState({ selectedRows: [], selectedRowKeys: [] });
    }
    const { dispatch, form } = this.props;
    const fieldsValues = form.getFieldsValue();
    const { editFlag } = this.state;
    const tempFieldsValue = queryParam || fieldsValues;
    dispatch({
      type: 'reduceempsend/updateModelData',
      payload: { proBaseList: {}, proFbList: [] },
    });
    dispatch({
      type: 'reduceempsend/updateTabListQuery',
      payload: { formFieldsValue: tempFieldsValue, activeKey },
    });
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formFieldsValue = {};
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'empName' || key === 'idCode') {
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        if (key === 'createTime') {
          formFieldsValue.operTimeStart = fieldsValue.createTime
            ? fieldsValue.createTime[0].format('YYYY-MM-DD')
            : null;
          formFieldsValue.operTimeEnd = fieldsValue.createTime
            ? fieldsValue.createTime[1].format('YYYY-MM-DD')
            : null;
          // eslint-disable-next-line no-param-reassign
        }
        delete formFieldsValue.createTime;
        formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
      });
      const pageArg = { currentPage, pageSize };
      const values = {
        hdlState: activeKey,
        editFlag,
        ...formFieldsValue,
        pageArg,
      };
      // if (activeKey === '5') {
      //   dispatch({
      //     type: 'reduceempsend/fetchProList',
      //     payload: {
      //       ...values,
      //       busiType: 2,
      //     },
      //   });
      // } else {
      //   dispatch({
      //     type: 'reduceempsend/fetchList',
      //     payload: values,
      //   });
      // }

      const downloadParams = {
        ...formFieldsValue,
        busiType: 12,
        hdlState: activeKey,
        editFlag,
      };
      dispatch({
        type: 'reduceempsend/updateModelData',
        payload: {
          downloadParams,
        },
      });
      if (activeKey && Number(activeKey) === 5) {
        setTimeout(() => {
          const { proTable } = this.state;
          const proFormFieldsValue = { ...formFieldsValue, busiType: 12 };
          if (proTable.searchList) {
            proTable.searchList(proFormFieldsValue, currentPage, pageSize);
          }
        });
      } else {
        dispatch({
          type: 'reduceempsend/fetchList',
          payload: values,
        });
      }

      this.setState({
        formValues: values,
      });
    });
  };

  // 获取页签数量
  getTabNum = (activeKey, currentPage = 1, pageSize = 10) => {
    const { editFlag } = this.state;
    const { tabList, dispatch, form } = this.props;
    const newTabList = tabList.map(item => ({ ...item, isHas: false }));
    form.validateFields((err, fieldsValue) => {
      dispatch({
        type: 'reduceempsend/updateModelData',
        payload: { tabList: newTabList, formFieldsValue: fieldsValue },
      });
      if (err) return;
      const formFieldsValue = {};
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'empName' || key === 'idCode') {
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        if (key === 'createTime') {
          formFieldsValue.operTimeStart = fieldsValue.createTime
            ? fieldsValue.createTime[0].format('YYYY-MM-DD')
            : null;
          formFieldsValue.operTimeEnd = fieldsValue.createTime
            ? fieldsValue.createTime[1].format('YYYY-MM-DD')
            : null;
          // eslint-disable-next-line no-param-reassign
        }
        delete formFieldsValue.createTime;
        formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
      });
      const checkHasValue = Object.keys(fieldsValue).some(
        key => Boolean(fieldsValue[key]) !== false
      );
      if (!checkHasValue) {
        tabList.map(item => {
          item.isHas = false;
        });
        this.getList(activeKey);
        this.setState({ tabList });
        // return;
      }
      this.setState({
        selectedRows: [],
        selectedRowKeys: [],
        formValues: formFieldsValue,
      });
      const values = {
        // hdlState: activeKey,
        editFlag,
        ...formFieldsValue,
      };
      if (activeKey === '5') {
        const downloadParams = {
          ...formFieldsValue,
          busiType: 12,
          hdlState: activeKey,
          editFlag,
        };
        dispatch({
          type: 'reduceempsend/updateModelData',
          payload: {
            downloadParams,
          },
        });
      }
      dispatch({
        type: 'reduceempsend/fetchTabNum',
        payload: { formFieldsValue: values, currentPage, pageSize },
      });
    });
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'reduceempsend/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  getData = (value, id) => {
    if (id) {
      this.props.form.setFieldsValue({ [id]: value });
      this.setState({ [id]: value });
    }
  };

  // 点击复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey } = this.state;
    this.getList(activeKey, pagination.current, pagination.pageSize, undefined, false);
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    form.setFieldsValue({ createTime: null });
    this.setState({ formValues: {} });

    dispatch({
      type: 'reduceempsend/updateModelData',
      payload: { formFieldsValue: {} },
    });
  };

  // 切换页签
  changeTabPane = activeKey => {
    if (activeKey === '4') {
      this.setState({ editFlag: undefined });
    }
    router.push({
      pathname: '/sendordermanage/reduceemployee/index',
      query: {
        activeKey,
      },
    });
    const { tabList } = this.state;
    tabList.map(item => {
      if (item.itemCode === activeKey) {
        item.isHas = false;
      }
    });
    this.setState({ activeKey, tabList, selectedRows: [], selectedRowKeys: [] }, () => {
      this.getList(activeKey);
    });
  };

  // 发单
  send = () => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认发单当前条件下所有数据',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.sendTask();
        },
      });
    } else {
      this.sendTask();
    }
  };

  // 发单任务
  sendTask = () => {
    const { selectedRowKeys, formValues, activeKey } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'reduceempsend/sendTask',
      payload: { sendCutTaskIds: selectedRowKeys, ...formValues },
    }).then(response => {
      if (response.success) {
        this.getList(activeKey);
        this.setState({
          selectedRows: [],
          selectedRowKeys: [],
        });
        message.success('发单成功！');
      } else {
        message.warning(`${response.message || '发单失败！'}`);
      }
    });
  };

  // 导出数据
  export = () => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认导出当前条件下所有数据',
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          this.exportExcel();
        },
      });
    } else {
      this.exportExcel();
    }
  };

  // 导出excel
  exportExcel = () => {
    const { formValues, selectedRowKeys } = this.state;
    const { activeKey } = this.props;
    delete formValues.pageArg;
    let params = {
      ...formValues,
    };
    if (activeKey === '5') {
      params = {
        ...params,
        busiType: 12,
        detIds: selectedRowKeys.length ? selectedRowKeys : null,
        hdlState: activeKey,
      };
      downloadFile(params, '/nsApi/sendProb/export', 'POST');
    } else {
      params = {
        ...params,
        sendCutTaskIds: selectedRowKeys.length ? selectedRowKeys : null,
        hdlState: activeKey,
      };
      downloadFile(params, '/nsApi/sendDedu/export', 'POST');
    }
  };

  async resetAndGeLlist(location) {
    const { dispatch, tabList } = this.props;
    const { queryParam } = location;
    if (queryParam) {
      await dispatch({
        type: 'reduceempsend/updateModelData',
        payload: {
          expandForm: true,
        },
      });
    } else {
      const newTabList = tabList.map(item => ({ ...item, isHas: false }));
      dispatch({
        type: 'reduceempsend/updateModelData',
        payload: { expandForm: false, tabList: newTabList },
      });
    }
    await this.resetSearch();
    await this.getList(location.query.activeKey, undefined, undefined, queryParam);
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      supplyList,
      activeKey,
      formFieldsValue,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="接单方" {...this.tableSearchLayout}>
              {getFieldDecorator('recvSuppId', {
                initialValue: formFieldsValue.recvSuppId,
              })(
                // <Supplier allowClear params={{ status: 2 }} />
                <Select
                  placeholder="请输入关键字检索"
                  showSearch
                  optionFilterProp="children"
                  notFoundContent="暂无数据"
                  onSelect={(value, options) => this.getData(value, options)}
                  allowClear
                  // onChange={this.getsuppId}
                >
                  {supplyList.map(item => (
                    <Option key={item.suppId} title={item.name}>
                      {item.name}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地区" {...this.tableSearchLayout}>
              {getFieldDecorator('cityId', {
                initialValue: formFieldsValue.cityId,
              })(<Area allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit" onClick={() => this.getTabNum(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      supplyList,
      activeKey,
      formFieldsValue,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="接单方" {...this.tableSearchLayout}>
              {getFieldDecorator('recvSuppId', {
                initialValue: formFieldsValue.recvSuppId,
              })(
                <Select
                  placeholder="请输入关键字检索"
                  showSearch
                  optionFilterProp="children"
                  notFoundContent="暂无数据"
                  onSelect={(value, options) => this.getData(value, options)}
                  allowClear
                >
                  {supplyList.map(item => (
                    <Option key={item.suppId} title={item.name}>
                      {item.name}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地区" {...this.tableSearchLayout}>
              {getFieldDecorator('cityId', {
                initialValue: formFieldsValue.cityId,
              })(<Area allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" {...this.tableSearchLayout}>
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
              })(<Customer getData={this.getData} allowClear />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('idCode', {
                initialValue: formFieldsValue.idCode,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="操作时间" {...this.tableSearchLayout}>
              {getFieldDecorator('createTime', {
                initialValue: formFieldsValue.createTime,
              })(
                <RangePicker
                  placeholder={['开始日期', '结束日期']}
                  style={{ width: '100%' }}
                  format="YYYY-MM-DD"
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <div style={{ overflow: 'hidden' }}>
          <div style={{ float: 'right', marginBottom: 24 }}>
            <Button type="primary" htmlType="submit" onClick={() => this.getTabNum(activeKey)}>
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
              重置
            </Button>
            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
              收起
              <UpOutlined />
            </a>
          </div>
        </div>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const { data, loading, tabList, activeKey, proListData, downloadParams } = this.props;
    const { selectedRows, selectedRowKeys, editFlag } = this.state;
    // 待发单
    const columnWaitting = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="问题人员" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      // {
      //   title: '离职日期',
      //   dataIndex: 'evaDate',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   sorter: (a, b) => new Date(b.evaDate) - new Date(a.evaDate),
      //   render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      // },
      // {
      //   title: '业务结束年月',
      //   dataIndex: 'busiEndYm',
      //   sorter: (a, b) => new Date(b.busiEndYm) - new Date(a.busiEndYm),
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      // },
      {
        title: '执行地区',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        dataIndex: 'cityName',
      },
      {
        title: '接单方',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        dataIndex: 'recvSuppName',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '协议名称',
        dataIndex: 'suppProtName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '任务类型',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        dataIndex: 'taskSourceName',
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.operTime) - new Date(a.operTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <Link
            to={`/sendordermanage/reduceemployee/detail?sendOrdCutTaskId=${
              record.sendOrdCutTaskId
            }`}
          >
            查看
          </Link>
        ),
      },
    ];
    const lll = data;
    // 已发单
    const columnsSened = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      // {
      //   title: '业务结束年月',
      //   dataIndex: 'busiEndYm',
      //   sorter: (a, b) => new Date(b.busiEndYm) - new Date(a.busiEndYm),
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      // },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '任务类型',
        dataIndex: 'taskSourceName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '发单时间',
        dataIndex: 'sendTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.sendTime) - new Date(a.sendTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <Link
            to={`/sendordermanage/reduceemployee/detail?sendOrdCutTaskId=${
              record.sendOrdCutTaskId
            }`}
          >
            查看
          </Link>
        ),
      },
    ];
    // 已接单
    const columnsRecsived = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      // {
      //   title: '离职日期',
      //   dataIndex: 'evaDate',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   sorter: (a, b) => new Date(b.evaDate) - new Date(a.evaDate),
      //   render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      // },
      // {
      //   title: '业务结束年月',
      //   dataIndex: 'busiEndYm',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   sorter: (a, b) => new Date(b.busiEndYm) - new Date(a.busiEndYm),
      // },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '任务类型',
        dataIndex: 'taskSourceName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '接单时间',
        dataIndex: 'recvTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.recvTime) - new Date(a.recvTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <Link
            // to={`/sendordermanage/reduceemployee/receiptdetails?sendOrdCutTaskId=${
            //   record.sendOrdCutTaskId
            // }`}
            to={`/sendordermanage/reduceemployee/detail?sendOrdCutTaskId=${
              record.sendOrdCutTaskId
            }&activeKey=${activeKey}`}
          >
            查看
          </Link>
        ),
      },
    ];
    // 已回单
    const columnsReplied = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      // {
      //   title: '离职日期',
      //   dataIndex: 'evaDate',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   sorter: (a, b) => new Date(b.evaDate) - new Date(a.evaDate),
      //   render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      // },
      // {
      //   title: '业务结束年月',
      //   dataIndex: 'busiEndYm',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   sorter: (a, b) => new Date(b.busiEndYm) - new Date(a.busiEndYm),
      // },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '任务类型',
        dataIndex: 'taskSourceName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '有无修改',
        dataIndex: 'editFlagName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '回单时间',
        dataIndex: 'returnTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.returnTime) - new Date(a.returnTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <Link
            // to={`/sendordermanage/reduceemployee/receiptdetails?sendOrdCutTaskId=${
            //   record.sendOrdCutTaskId
            // }`}
            to={`/sendordermanage/reduceemployee/detail?sendOrdCutTaskId=${
              record.sendOrdCutTaskId
            }&activeKey=${activeKey}`}
          >
            查看
          </Link>
        ),
      },
    ];
    // 问题人员
    // const columnsProblem = [
    //   {
    //     title: '姓名',
    //     dataIndex: 'empName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '证件号',
    //     dataIndex: 'idCode',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '客户名称',
    //     dataIndex: 'custName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //     render: text => <TextOverFlow text={text} />,
    //   },
    //   {
    //     title: '接单方',
    //     dataIndex: 'recvSuppName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //     render: text => <TextOverFlow text={text} />,
    //   },
    //   {
    //     title: '问题对象',
    //     dataIndex: 'probObj',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '问题类型',
    //     dataIndex: 'probTypeIdName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '操作',
    //     dataIndex: 'operation',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
    //     onCell: () => ({ style: { textAlign: 'center' } }),
    //     render: (text, record) => (
    //       <Link to={`/sendordermanage/reduceemployee/prodetail?detId=${record.detId}`}>查看</Link>
    //     ),
    //   },
    // ];
    // 已取消
    const columnsCanceled = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'idCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      // {
      //   title: '离职日期',
      //   dataIndex: 'evaDate',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   sorter: (a, b) => new Date(b.evaDate) - new Date(a.evaDate),
      //   render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      // },
      // {
      //   title: '业务结束年月',
      //   dataIndex: 'busiEndYm',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   sorter: (a, b) => new Date(b.busiEndYm) - new Date(a.busiEndYm),
      // },
      {
        title: '任务类型',
        dataIndex: 'taskSourceName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '取消时间',
        dataIndex: 'cancelTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.cancelTime) - new Date(a.cancelTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <Link
            to={`/sendordermanage/reduceemployee/detail?sendOrdCutTaskId=${
              record.sendOrdCutTaskId
            }`}
          >
            查看
          </Link>
        ),
      },
    ];

    // 待发单
    const waitting = (
      <div>
        <Authorized authority="ns:sendDedu:pushTask" noMatch={null}>
          <Button type="primary" style={{ marginRight: 8, marginBottom: 16 }} onClick={this.send}>
            发单
          </Button>
        </Authorized>
        <Authorized authority="ns:sendDedu:export" noMatch={null}>
          <Button icon={<DownloadOutlined />} onClick={this.export} style={{ marginBottom: 16 }}>
            导出
          </Button>
        </Authorized>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="sendOrdCutTaskId"
          columns={columnWaitting}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 已发单
    const sended = (
      <div>
        <Authorized authority="ns:sendDedu:export" noMatch={null}>
          <Button
            type="primary"
            icon={<DownloadOutlined />}
            onClick={this.export}
            style={{ marginBottom: 16 }}
          >
            导出
          </Button>
        </Authorized>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={lll}
          rowKey="sendOrdCutTaskId"
          columns={columnsSened}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 已接单
    const received = (
      <div>
        <Authorized authority="ns:sendDedu:export" noMatch={null}>
          <Button
            type="primary"
            icon={<DownloadOutlined />}
            onClick={this.export}
            style={{ marginBottom: 16 }}
          >
            导出
          </Button>
        </Authorized>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={lll}
          rowKey="sendOrdCutTaskId"
          columns={columnsRecsived}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 已回单
    const replied = (
      <div>
        <div style={{ marginBottom: '16px' }}>
          <Authorized authority="ns:sendDedu:export" noMatch={null}>
            <Button type="primary" icon={<DownloadOutlined />} onClick={this.export}>
              导出
            </Button>
          </Authorized>
          <div style={{ float: 'right' }}>
            <RadioGroup
              className={styles.floatRight}
              value={editFlag}
              onChange={e => {
                this.setState({ editFlag: e.target.value }, () => {
                  this.getList(activeKey);
                });
              }}
            >
              <RadioButton value={undefined}>全部</RadioButton>
              <RadioButton value={2}>无修改</RadioButton>
              <RadioButton value={1}>有修改</RadioButton>
            </RadioGroup>
          </div>
        </div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="sendOrdCutTaskId"
          columns={columnsReplied}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const problem = (
      <div>
        <div style={{ marginBottom: '16px' }}>
          <Authorized noMatch={null} authority="ns:sndrDeduProb:addProbFdbk">
            <Button
              type="primary"
              onClick={() =>
                router.push('/sendordermanage/reduceemployee/batchfeedback?busiType=12')
              }
              style={{ marginRight: 8 }}
            >
              批量反馈
            </Button>
          </Authorized>
          <Authorized noMatch={null}>
            <ProExportBtn selectedRowKeys={selectedRowKeys} downloadParams={downloadParams} />
          </Authorized>
          {/* <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={proListData}
          rowKey="detId"
          columns={columnsProblem}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        /> */}
        </div>
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          onSelectRow={this.handleSelectRows}
          proUrl="/sendordermanage/reduceemployee/problem"
          busiType="12"
        />
      </div>
    );
    // 已取消
    const canceled = (
      <div>
        <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={data}
          rowKey="sendOrdCutTaskId"
          columns={columnsCanceled}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 获取页签组件
    const getTabPane = key => {
      switch (key) {
        case '1':
          return waitting;
        case '2':
          return sended;
        case '3':
          return received;
        case '4':
          return replied;
        case '5':
          return problem;
        case '6':
          return canceled;
        default:
          return <div />;
      }
    };
    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
              {tabList.map(pane => (
                <TabPane tab={<Badge dot={pane.isHas}>{pane.itemName}</Badge>} key={pane.itemCode}>
                  {getTabPane(pane.itemCode)}
                </TabPane>
              ))}
            </Tabs>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
